<template>
  <div>
    <el-form
      ref="baseForm"
      class="base-pipeline-layout system-customer-form"
      :model="dataForm"
      :rules="rules"
      status-icon
      label-width="100px"
    >
      <el-form-item :label="customer.customerName" prop="customerName">
        <el-input
          v-model="dataForm.customerName"
          :placeholder="customer.customerName"
          autocomplete="off"
        >
        </el-input>
      </el-form-item>
      <el-form-item :label="customer.customerAddress" prop="address">
        <el-input
          v-model="dataForm.address"
          :placeholder="customer.customerAddress"
          autocomplete="off"
        >
        </el-input>
      </el-form-item>

      <el-form-item :label="customer.customerNature" prop="nature">
        <el-input
          v-model="dataForm.nature"
          :placeholder="customer.customerNature"
          autocomplete="off"
        >
        </el-input>
      </el-form-item>
      <el-form-item :label="customer.salesPerson" prop="salesPerson">
        <el-input
          v-model="dataForm.salesPerson"
          :placeholder="customer.salesPerson"
          autocomplete="off"
        >
        </el-input>
      </el-form-item>
      <el-form-item :label="customer.customerNumber" prop="num">
        <el-input
          v-model="dataForm.num"
          :placeholder="customer.customerNumber"
          autocomplete="off"
        >
        </el-input>
      </el-form-item>

      <el-form-item :label="customer.phone" prop="phone">
        <el-input
          v-model="dataForm.phone"
          :placeholder="customer.phone"
          autocomplete="off"
        >
        </el-input>
      </el-form-item>
      <el-form-item :label="customer.email" prop="email">
        <el-input
          v-model="dataForm.email"
          :placeholder="customer.email"
          autocomplete="off"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        :label="customer.unitRegistrationNumber"
        prop="registrationNum"
      >
        <el-input
          v-model="dataForm.registrationNum"
          :placeholder="customer.unitRegistrationNumber"
          autocomplete="off"
        >
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getInfo } from "../../../api/SysBusiness/Customer.js";
export default {
  name: "CustomerBase",
  props: {
    customerId: {
      type: [String, Number],
      default: "",
    },
    customerDto: {
      type: Object,
      default: function() {
        return {};
      },
    },
  },
  data() {
    // const phone = (rule, value, callback) => {
    //   if (value === "") {
    //     callback();
    //   } else {
    //     if (phoneVerify(value)) {
    //       callback();
    //     } else {
    //       callback(new Error("请输入正确的手机号码"));
    //     }
    //   }
    // };
    return {
      rules: {
        customerName: [
          {
            required: true,
            message: this.$t("Customer.customerNameRequired"),
            trigger: "blur",
          },
        ],
        // phone: [
        //   {
        //     message: "请输入正确的手机号码",
        //     trigger: ["blur", "change"],
        //     validator: phone,
        //   },
        // ],
        email: [
          {
            type: "email",
            message: this.$t("Customer.enterCorrectEmail"),
            trigger: "blur",
          },
        ],
      },
      submitLoad: false,
      dataForm: {
        id: 0,
        customerName: "",
        nature: "",
        address: "",
        num: "",
        registrationNum: "",
        phone: "",
        email: "",
        // 新增
        customerPerson: [],
        // 删除
        deleteCustomerPerson: [],
        // 修改
        updateCustomerPerson: [],
      },
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    customer() {
      return this.$t("Customer") || {};
    },
  },
  watch: {
    customerId: {
      handler(val, oldVal) {
        if (val) {
          this.$emit("update:customerId", val);
          this.init();
        }
      },
      deep: true,
      immediate: true,
    },
    customerDto: {
      handler(newValue) {
        this.dataForm = newValue;
      },
      deep: true,
    },
  },
  methods: {
    validateForm() {
      let flag = null;
      this.$refs["baseForm"].validate((valid) => {
        if (valid) {
          flag = true;
        } else {
          flag = false;
        }
      });
      return flag;
    },
    // 编辑时加载
    init() {
      getInfo({ Id: this.customerId }).then((res) => {
        this.dataForm = res.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.system-customer-form {
  // padding-bottom: 24px;
  .relay-only-value {
    margin-bottom: 2px;
  }
  .default-form-item {
    display: block;
    height: 84px;
  }
}

.add {
  width: 30px;
  color: white;
  font-size: 20px;
  height: 32px;
  text-align: center;
  border-radius: 5px;
  border: 1px silver;
  background-color: #4787ff;
  margin-left: 10px;
  float: left;
  position: absolute;
  top: 0px;
  left: 121px;
}
.delete {
  background-color: rgb(194, 194, 194);
  left: 170px;
  font-size: 12px;
  border-radius: 10px;
}
</style>
